<template>
    <div>
       <h2>王浩哲 yyds</h2>
       <h2>指令 响应式语句</h2>
       <h2>{{num}}</h2>
       <h2>{{str}}</h2>
       <h2>{{arr}}</h2>
       <h2>{{obj}}</h2>
       <h2>{{objarr}}</h2>
       <input type="button" value="修改num的值" v-on:click="fn">
       <input type="button" value="修改str的值" @click="fn1">
       <input type="button" value="修改arr的值" @click="fn3">
       <input type="button" value="修改obj的值" @click="fn2">
       <input type="button" value="修改objarr的值" @click="fn4">
    </div>
</template>

<script setup lang="ts">
//ref:作用就是将任意类型数据变成相应 是任何类型的数据
import {ref} from 'vue'

let num:any= ref(100)
let str:any=ref("好好学习")
let arr:any=ref(["吃饭","喝","玩"])
let obj:any=ref({
    name:'张三',
    age:20,
    sex:false
})
let objarr:any=ref([
    {id:1,name:"王昊泽",age:20},
    {id:2,name:"王昊泽2",age:21},
    {id:3,name:"王昊泽3",age:22},
    {id:4,name:"王昊泽4",age:23},
    {id:5,name:"王昊泽5",age:24}
])
function fn(){
    num.value++;
    console.log(num.value);
}
// function fn1(){
//     num.value++;
//     console.log("day day up");
// }
//函数的报错
const fn1 =()=>{
    str.value="day day up"
}

const fn3=()=>{
    arr.value[1]="晚婚"
}
const fn2=()=>{
    obj.value.name="李四"
}
const fn4=()=>{
    objarr.value[0].name="王浩哲"
}
</script>

<style scoped>

</style>